<template>
  <dl class="list-dl">
    <dt class="list-dt">{{ type }}</dt>
    <dd class="list-dd">
      <ol class="list-ol">
        <li class="list-li"
            v-for="(item,index) in content"
            :key="index"
            :class="{hot_li:index<=2}"
            @mouseenter="showIconBox(index)"
            @mouseleave="hiddenIconBox(index)">
          <span class="list-span" :class="{hot_span:index<=2}">{{ index + 1 }}</span>
          <div class="list-item-content" :class="{hot_content:index<=2}">{{ item.name }}</div>
          <!--          播放添加收藏按钮集合区-->
          <div ref="iconBox" class="all-icon-box">
            <svg @click="bofang(item)" class="icon" aria-hidden="true">
              <use xlink:href="#icon-bofang3"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jia"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xinzengwenjianjia"></use>
            </svg>
          </div>
        </li>
      </ol>
      <div class="list-view-all">
        <p class="list-view-all-text">查看全部</p>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-youjiantou"></use>
        </svg>
      </div>
    </dd>
  </dl>

</template>

<script>
import '@/assets/font/recommend'

export default {
  name: "MVRankingList",
  data() {
    return {}
  },
  props: {
    type: {
      type: String
    },
    content: {
      type: Array
    },
    expectedWidth: {
      type: String
    }
  },
  methods: {
    //TODO 暂时获得不了url
    bofang(value){
      // this.$store.dispatch('player/addSongMessage',value)
    },
    showIconBox(index) {
      let allIconBox = this.$refs.iconBox[index]
      allIconBox.style.display = 'flex'
    },
    hiddenIconBox(index) {
      let allIconBox = this.$refs.iconBox[index]
      allIconBox.style.display = 'none'
    }
  }
}
</script>

<style scoped lang="less">

.list-dl {
  .list-dt {
    text-align: center;
    color: #b4b1af;
  }
  
  .list-dd {
    
    .list-ol {
      
      .list-li {
        height: 40px;
        display: flex;
        align-items: center;
        margin-top: 10px;
        transition: all .2s linear;
        
        &:hover {
          transform: translateY(-2px);
          border-radius: 20px;
          border: 1px solid #b4b1af;
          box-shadow: 5px 5px 20px #AEAEAE;
        }
        
        .list-span {
          height: 40px;
          line-height: 40px;
          text-align: center;
          width: 20%;
          color: #b4b1af;
          font-size: 14px;
        }
        
        .hot_span {
          font-size: 16px;
          color: #B2281E;
        }
        
        .list-item-content {
          color: #b4b1af;
          font-size: 12px;
          width: 50%;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
        
        .hot_content {
          font-size: 16px;
          transition: all .2s linear;
        }
        
        .all-icon-box {
          width: 30%;
          height: 100%;
          display: none;
          justify-content: space-around;
          align-items: center;
          transition: all .2s linear;
          .icon {
            cursor: pointer;
            height: 100%;
            font-size: 1em;
            color: #787878;
            transition: all .2s linear;
            
            &:hover {
              color: white;
            }
          }
        }
      }
      
      .hot_li {
        &:hover {
          box-shadow: 5px 5px 20px #B2281E;
          
          .hot_content {
            color: #B2281E;
          }
        }
      }
    }
    
    .list-view-all {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      
      .list-view-all-text {
        color: #b4b1af;
        margin: 10px 0 10px 0;
        font-size: 14px;
        cursor: pointer;
      }
      
      .icon {
        color: #B2281E;
      }
    }
  }
}
</style>
